﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script>
    var image=["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];
    var index=0;
    $(document).ready(function (){

        $(".adver").mouseover(function (){
            $(".arrowRight").show();
            $(".arrowLeft").show();
        }).mouseout(function (){
            $(".arrowRight").hide();
            $(".arrowLeft").hide();
        });


        $(".arrowRight").click(function (){

            if (index==5){
                alert("这已经是最后一章了")
            }else {
                index++;
                $(".adver").css("background","url(images/"+image[index]+")");
                $("li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","#333");
            }
        });

      $(".arrowLeft").click(function (){
            if (index==0){
                alert("这已经是第一章了")
            }else {
                index--;
                $(".adver").css("background","url(images/"+image[index]+")");
                $("li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","#333333")
            }
        });
    });
    $(function (){
        www2()
    })

    function www2(){
        setInterval("www()",1000);
    }

    function www(){
        if (index==5){
            index=0;
            $(".adver").css("background","url(images/"+image[index]+")");
            $("li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","#333");
        }else {
            index++;
            $(".adver").css("background","url(images/"+image[index]+")");
            $("li:nth-of-type("+(index+1)+")").css("background","orange").siblings().css("background","#333");
        }
    }
</script>
</body>
</html>